<template>
	<view class="create-game">
		<statusBar></statusBar>
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">请下拉菜单选择角色配置，确认后提交创建新游戏。</text>
		</uni-card>
		<gameInfo :num="gamePlayerNum" :status="gameProcessStatus" :date="$utils.formatDate(Date.now())" />
		<view class="dm-control">
			<view class="control-btn">
				<button class="mini-btn" type="primary" size="mini" @click="createGame">创建</button>
			</view>
		</view>
		<view>
			<!-- 游戏创建配置确认框 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog type="warn" :content="gameSettingsText"
					title="游戏创建-配置信息确认" @confirm="subCreateGame" @close="resetGameSetting">
				</uni-popup-dialog>
			</uni-popup>
		</view>
		<view>
			<!-- 创建结果弹窗 -->
			<uni-popup ref="resultMessage" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	import gameInfo from '@/components/gameinfo.vue'
	import { GAME_ID,GAME_STATUS } from '@/common/utils'
	import {creategame,createcurrentround} from "@/common/api"
	import {formatDate} from "@/common/utils"
	import {mapState,mapMutations,mapGetters,mapActions} from "@/store/helper/dm"
	export default {
		components: {
			gameInfo,
			statusBar
		},
		data() {
			return {
				gameSettingsText:"",
				msgType: '',
				messageText: '',
			}
		},
		computed: {
			playerNumLimit() {
				if (this.gamePlayerNum > 18) {
					this.msgType = 'warn'
					this.messageText = `当前创建人数超过限制，座位数最多为18`
					this.$refs.resultMessage.open()
				}
			},
			...mapState([
				"currentGameID",
				"currentGameRoleListConfirm",
				"gameStatus",
				"currentGameRoleParams"
			]),
			...mapGetters([
				"gameProcessStatus",
				"gamePlayerNum",
			]),
		},
		methods: {
			createGame() {
				this.gameSettingsText='本轮游戏将按照如下角色配置:\n'+this.currentGameRoleListConfirm.join("")
				this.$refs.inputDialog.open()
			},
			async subCreateGame() {
				const {data,statusCode,errMsg} = await creategame({
					"gameRoleSettings":this.currentGameRoleParams,
					"playerCount": this.gamePlayerNum
				})
				if (data.code === "200") {
					this.setGameStatus(data.data.processStatus)
					this.setCurrentGameID(data.data.code)
					this.setCurrentGameDTO(data.data)
					uni.setStorageSync('GAME_ID',data.data.code)
					uni.setStorageSync('GAME_STATUS',data.data.processStatus)	
					this.msgType = 'success'
					this.messageText = data.message
					this.$refs.resultMessage.open()
					//不需要创建首个回合 直接进入首夜
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/view/dm/start-game'
						})
					}, 1000)
				} else {
					this.msgType = 'error'
					this.messageText = `创建游戏失败:` + data.message
					this.$refs.resultMessage.open()
				}
			},
			resetGameSetting() {
				this.clearCurrentGame()
			},
			...mapMutations([
				"setCurrentGameID",
				"setCurrentGameDTO",
				"setGameStatus"
			]),
			...mapActions([
				"clearCurrentGame"
			])
		},
		onLoad() {
			this.setGameStatus('setting')
		}
	}
</script>

<style lang="scss" scoped>

	.player-control {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	.control-btn {
		display: flex;
		align-items: center;
		margin-top: 36.23rpx;
	}
</style>
